import React from 'react'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import ErrorBoundary from '../../components/ErrorBoundary'
import styles from './index.module.css'

const Website = () => {
  const navigate = useNavigate()

  // 科室数据
  const departments = [
    { id: 1, name: '门诊外科', icon: '🔪' },
    { id: 2, name: '门诊内科', icon: '💊' },
    { id: 3, name: '口腔科', icon: '🦷' },
    { id: 4, name: '神经运动', icon: '🧠' },
    { id: 5, name: '妇产科', icon: '👶' },
    { id: 6, name: '儿科', icon: '👶' },
    { id: 7, name: '眼科', icon: '👁️' },
    { id: 8, name: '皮肤科', icon: '🩹' },
    { id: 9, name: '骨科', icon: '🦴' },
    { id: 10, name: '心内科', icon: '❤️' },
    { id: 11, name: '消化科', icon: '🫁' },
    { id: 12, name: '泌尿科', icon: '💧' }
  ]

  // 医生数据
  const doctors = [
    {
      id: 1,
      name: '高医师',
      title: '主治医师',
      department: '门诊外科',
      avatar: '👨‍⚕️'
    },
    {
      id: 2,
      name: '刘医师',
      title: '主治医师',
      department: '门诊内科',
      avatar: '👨‍⚕️'
    },
    {
      id: 3,
      name: '张医师',
      title: '副主任医师',
      department: '口腔科',
      avatar: '👩‍⚕️'
    },
    {
      id: 4,
      name: '王医师',
      title: '主任医师',
      department: '神经科',
      avatar: '👨‍⚕️'
    }
  ]

  // 公告数据
  const announcements = [
    {
      id: 1,
      title: '智慧医院便民平台小程序上线啦,手机也能问诊医生啦',
      content: '智慧医院便民平台已成功上线在线咨询功能,广大群.......',
      source: '四川省保健院',
      time: '10天前',
      views: '1W+人已读',
      isPinned: true
    },
    {
      id: 2,
      title: '智慧医院即将上线通知',
      content: '智慧医院便民平台将于2天后上线,尽情期待。',
      source: '四川省保健院',
      time: '3个月前',
      views: '6W+人已读',
      isPinned: false
    }
  ]

  const handleDepartmentClick = (department) => {
    console.log('选择科室:', department.name)
    // 这里可以跳转到科室详情页面
  }

  const handleDoctorClick = (doctor) => {
    console.log('选择医生:', doctor.name)
    // 这里可以跳转到医生详情页面
  }

  const handleMoreDepartments = () => {
    console.log('查看全部科室')
    // 跳转到科室列表页面
  }

  const handleMoreDoctors = () => {
    console.log('查看全部医生')
    // 跳转到医生列表页面
  }

  const handleMoreAnnouncements = () => {
    console.log('查看更多公告')
    // 跳转到公告列表页面
  }

  const handleBottomNavClick = (section) => {
    console.log('点击底部导航:', section)
    // 根据点击的导航项跳转到不同的页面
    switch (section) {
      case 'home':
        navigate('/') // 假设首页是根路径
        break
      case 'website':
        navigate('/website') // 假设微官网是 /website 路径
        break
      case 'message':
        navigate('/message') // 假设消息中心是 /message 路径
        break
      case 'profile':
        navigate('/profile') // 假设我的是 /profile 路径
        break
      default:
        break
    }
  }

  return (
    <div className={styles.websitePage}>
      <ErrorBoundary>
        <TopNavbar
          title="智慧医院平台"
          showBack={true}
          onBack={() => navigate(-1)}
          rightContent={
            <>
              <span className={styles.navIcon}>⋯</span>
              <span className={styles.navIcon}>◎</span>
            </>
          }
        />
      </ErrorBoundary>

      <div className={styles.content}>
        {/* 医院概览卡片 */}
        <div className={styles.hospitalCard}>
          <div className={styles.hospitalImage}>
            <div className={styles.hospitalInfo}>
              <div className={styles.hospitalHeader}>
                <div className={styles.hospitalIcon}>🏥</div>
                <div className={styles.hospitalDetails}>
                  <div className={styles.hospitalName}>四川省保健院</div>
                  <div className={styles.hospitalGrade}>三甲</div>
                </div>
              </div>
              
              <div className={styles.hospitalIntro}>
                <div className={styles.introTitle}>简介:</div>
                <div className={styles.introContent}>
                  四川省保健院是一所以急救医学、耳鼻喉专业学科为特色,融医疗、教学、科研、预防、保健为一体的综合性三级甲等医院...
                  <span className={styles.moreLink}>更多</span>
                </div>
              </div>
              
              <div className={styles.hospitalAddress}>
                <span>四川省成都市锦江区画溪路666号</span>
                <div className={styles.addressIcons}>
                  <span className={styles.locationIcon}>📍</span>
                  <span className={styles.divider}>|</span>
                  <span className={styles.phoneIcon}>📞</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 科室导航 */}
        <div className={styles.section}>
          <div className={styles.sectionHeader}>
            <h3 className={styles.sectionTitle}>科室</h3>
            <span className={styles.moreLink} onClick={handleMoreDepartments}>
              全部科室
            </span>
          </div>
          <div className={styles.departmentsGrid}>
            {departments.map((dept) => (
              <div 
                key={dept.id} 
                className={styles.departmentCard}
                onClick={() => handleDepartmentClick(dept)}
              >
                <div className={styles.departmentIcon}>{dept.icon}</div>
                <div className={styles.departmentName}>{dept.name}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 医生展示 */}
        <div className={styles.section}>
          <div className={styles.sectionHeader}>
            <h3 className={styles.sectionTitle}>医生</h3>
            <span className={styles.moreLink} onClick={handleMoreDoctors}>
              全部医生
            </span>
          </div>
          <div className={styles.doctorsList}>
            {doctors.map((doctor) => (
              <div 
                key={doctor.id} 
                className={styles.doctorCard}
                onClick={() => handleDoctorClick(doctor)}
              >
                <div className={styles.doctorAvatar}>{doctor.avatar}</div>
                <div className={styles.doctorInfo}>
                  <div className={styles.doctorName}>{doctor.name}</div>
                  <div className={styles.doctorTitle}>{doctor.title}</div>
                  <div className={styles.doctorDepartment}>{doctor.department}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 医院公告 */}
        <div className={styles.section}>
          <div className={styles.sectionHeader}>
            <h3 className={styles.sectionTitle}>医院公告</h3>
            <span className={styles.moreLink} onClick={handleMoreAnnouncements}>
              更多公告
            </span>
          </div>
          <div className={styles.announcementsList}>
            {announcements.map((announcement) => (
              <div key={announcement.id} className={styles.announcementCard}>
                <div className={styles.announcementHeader}>
                  {announcement.isPinned && (
                    <span className={styles.pinnedTag}>置顶</span>
                  )}
                  <div className={styles.announcementTitle}>
                    {announcement.title}
                  </div>
                </div>
                <div className={styles.announcementContent}>
                  {announcement.content}
                </div>
                <div className={styles.announcementFooter}>
                  <span className={styles.announcementSource}>{announcement.source}</span>
                  <span className={styles.announcementTime}>{announcement.time}</span>
                  <span className={styles.announcementViews}>{announcement.views}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 底部导航栏 */}
      <div className={styles.bottomNav}>
        <div className={styles.navItem} onClick={() => handleBottomNavClick('home')}>
          <div className={styles.navIcon}>🏠</div>
          <div className={styles.navText}>诊疗首页</div>
        </div>
        <div className={`${styles.navItem} ${styles.active}`} onClick={() => handleBottomNavClick('website')}>
          <div className={styles.navIcon}>🌐</div>
          <div className={styles.navText}>微官网</div>
        </div>
        <div className={styles.navItem} onClick={() => handleBottomNavClick('message')}>
          <div className={styles.navIcon}>💬</div>
          <div className={styles.navText}>消息中心</div>
        </div>
        <div className={styles.navItem} onClick={() => handleBottomNavClick('profile')}>
          <div className={styles.navIcon}>👤</div>
          <div className={styles.navText}>我的</div>
        </div>
      </div>
    </div>
  )
}

export default Website